import {messages} from "share/common";

import React from 'react';
import {connect} from 'react-redux';
import 'styles/components/template/welcome-messages-modal/welcome-messages-modal.scss'
import {Button, Row, Col, Card, Carousel, Modal} from 'antd';
import WelcomeMessagesService from "components/template/welcome-messages-modal/welcome-messages-modal.service";
import menuRoute from "routes/menuRoute";

class WelcomeMessagesModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      //欢迎消息模态框
      carousels: [],
      visible: false,//模态框轮播图上的visible
      currentCarousels: null,//当前轮播图
      messagesCenterDetail: menuRoute.getRouteItem('messages-center-detail', 'key').url,//消息详情页
    };
  }

  componentWillMount() {
    this.getSystemWelcomeInfo();
  }

  //created by wangruonan 20181008
  //获取欢迎消息系统消息图片并处理
  getSystemWelcomeInfo = () => {
    const {carousels} = this.state;
    WelcomeMessagesService.getSystemWelcomeInfo().then(res => {
      if (res.data && res.data.indexNotify === "Y" && res.data.notificationDetails && res.data.notificationDetails.length) {
        res.data.notificationDetails.map(item => {
          item.imageLink && carousels.push(item);
        });
        if(carousels.length){
          this.setState({
            carousels,
            currentCarousels: carousels[0],
            visible: true,
          })
        }
      }
    })
  };

  //点击模态框轮播图的查看
  checkoutOutInfo = () => {
    const {currentCarousels, messagesCenterDetail} = this.state;
    this.context.router.push(messagesCenterDetail.replace(":id", currentCarousels.id));
    this.setState({visible: false, carousels: []})
  };

  //点击模态框轮播图的X
  alreadyRead = () => {
    WelcomeMessagesService.alreadyRead().then(res => {
      this.setState({visible: false})
    }).catch(err => {
      this.setState({visible: false})
    })
  };

  //轮播图切换时
  carouselsChange = (current) => {
    const {carousels} = this.state;
    carousels.map((item, index) => {
      if(index === current){
        this.setState({
          currentCarousels: carousels[index],
        })
      }
    });
  };

  render() {
    const {carousels, visible, } = this.state;
   
    return (
      <div className="welcome-messages-modal">
        <Modal maskClosable={false}
               visible={visible}
               title={null}
               zIndex={100}
               bodyStyle={{paddingTop: 44}}
               footer={null}
               onCancel={this.alreadyRead}
               getContainer={() => document.getElementsByClassName('welcome-messages-modal')[0]}>
          <Row gutter={10} type="flex" align="top">
            <Col span={24}>
              <Card className={"carousels"} bodyStyle={{padding: 0}}>
                {
                  carousels.length ?
                  <Carousel autoplay={carousels.length > 1} afterChange={this.carouselsChange}>
                    {carousels.map((item, index) => {
                      return (
                        <div className={'carousel'} key={item.id} onClick={this.checkoutOutInfo}>
                          <img src={item.imageLink} style={{width: 482, height: 276}}/>
                          <div className={"carousel-title"}>{item.title}</div>
                        </div>
                      )
                    })}
                  </Carousel> : null
                }
              </Card>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <div style={{textAlign: 'center', marginTop: 10}}>
                <Button type={'primary'} ghost onClick={this.checkoutOutInfo}>
                  {messages('dashboard.key128')/*查看详情*/}
                </Button>
              </div>
            </Col>
          </Row>
        </Modal>
      </div>

    );
  }
}

WelcomeMessagesModal.propTypes = {
  onConfirm: React.PropTypes.func,// 点击确认之后的回调：返回结果
  onCancel: React.PropTypes.func,//点击取消的时候
};

WelcomeMessagesModal.contextTypes = {
  router: React.PropTypes.object
};
WelcomeMessagesModal.defaultProps = {};

function mapStateToProps(state) {
  return {
    user: state.login.user,
  }
}

export default connect(mapStateToProps)(WelcomeMessagesModal);



